import React, { Component } from 'react'
import ChartBox from 'components/chart'
import { Grid, Dropdown } from 'semantic-ui-react'
import moment from 'moment'
import { OneDay, Month } from 'components/date'
import MonthChart from './year'
const currentYear = new Date().getFullYear()
const initMonth = new Date().getMonth() + 1
const initDate = new Date(currentYear, initMonth)

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      m: initMonth,
      y: currentYear,
    }
  }

  handleDayChange = (m, y) => {
    this.setState({
      m: parseInt(m, 10) + 1,
      y: parseInt(y, 10),
    })
  }

  render() {
    const { match, project } = this.props
    const { projectId } = project
    const { name } = match.params
    const { m, y } = this.state
    console.log(m, y)
    return (
      <React.Fragment>
        <Grid.Row>
          <Grid.Column width={8}>
            <Month yearOnly onChange={this.handleDayChange} />
          </Grid.Column>
        </Grid.Row>
        <MonthChart pid={projectId} username={name} month={m} year={y} />
      </React.Fragment>
    )
  }
}
